<template>
<!--  收藏页面-->


  <div class="big1">
    <!--  顶部-->
    <div class="top1">
      <van-icon class="leftjiantou" size="20px" @click="fanhui" name="arrow-left"/>
      <p class="zi1">我的收藏</p>
      <p class="zi2" @click="editmyfavorites">编辑</p>
    </div>

    <!--  中间搜索框-->
    <div class="middle">
<!--      <van-search class="middle1" placeholder="请输入编号或地址"/>-->
<!--      <button class="button1" disabled >搜索</button>-->
    </div>

    <!--  下-->
    <div class="under" v-for="i in cabinetmachine" :key="i.id">
      <div class="under1">
        <img class="img1"
             src="https://myimagezxy1.oss-cn-beijing.aliyuncs.com/lsz/%E6%99%BA%E8%83%BD%E6%9F%9C%E5%8A%9F%E8%83%BD%E9%87%8C%E7%9A%84.svg"
             alt="网络加载超时">
      </div>
      <div class="under2">
        <p class="zi3">{{ i.machineCode }}</p>
        <p class="zi7" v-if="i.machineStatus==1">已停用</p>
      </div>
      <div class="under3">
        <p class="zi4">{{ i.location }}{{ i.address }}</p>
      </div>
      <div class="under4">
        <p class="zi5">可用箱格:</p>
        <img class="img3" src="https://myimagezxy1.oss-cn-beijing.aliyuncs.com/lsz/%E7%AE%B1%E6%A0%BC.svg"
             alt="网络加载超时">
        <p class="zi6">{{ i.id }}/24个</p>
      </div>
    </div>

  </div>

</template>


<script>

import {findcabinetmachine} from "@/api/cabinetmachine/CabinetMachine";

export default {
  data() {
    return {
      a: {
        isCollection: 1,
      },
      cabinetmachine: [],
    };
  },
  created() {
    this.findCabinetMachine()
  },
  methods: {
    /* 编辑我的收藏 */
    editmyfavorites() {
      this.$router.push({path: '/editMyFavoritesSmartCabinets/EditMyFavoritesSmartCabinets'})
    },
    /*  查询柜机 */
    findCabinetMachine() {
      findcabinetmachine(this.a).then(res => {
        this.cabinetmachine = res.data.data;
        console.log("柜机数据:", this.cabinetmachine)
      })
    },
    /* 顶部左箭头返回首页 */
    fanhui() {
      this.$router.push({path: '/smartlockersnearby/SmartlockersNearby'})
    },
  }
}

</script>

<style scoped>


/* 大盒子总体样式 */
.big {
  width: 100%;
  height: 100%;
  background-color: #f5f5f5;
}

/* 顶部盒子  */
.top1 {
  width: 100%;
  height: 40px;
//border: 1px solid red; background-color: white;

}

.zi1 {
//border: 1px solid red; margin-top: 5px; width: 100px; height: 30px; margin-left: 35%; font-size: 17px;
}

.zi2 {
  width: 100px;
  height: 30px;
  float: right;
//border: 1px solid red;
  margin-top: -47px;
}

/* 顶部左边箭头 */
.leftjiantou {
  float: left;
  margin-top: 3px;
  margin-left: 10px;
}

.middle {
  width: 95%;
  margin-left: 10px;
  height: 45px;
  border: 1px solid white;
  margin-top: 47px;
  background-color: white;
}

.masklayer {
  width: 20px;
  height: 20px;
  position: fixed;
  top: 61px;
  left: 15px;
  background-color: #fdd144;
  align-content: center;
  font-size: 15px;
}

.icon3 {
//border: 1px solid red; float: left;
  margin: 9px 2px;
}

.middle1 {
  width: 85%;
  height: 10px;
  background-color: white;
  margin: 12px 30px;
}

.button1 {
  border: 1px solid red;
  float: right;
  margin-top: -38px;
  background-color: white;
  border: none;
  margin-right: -2px;
}

.under {
  width: 90%;
  height: 170px;
  background-color: white;
//border: 1px solid red;
  margin-left: 22px; margin-top: 10px;
}

.img1 {
  width: 22px;
  height: 30px;
}

.under1 {
  width: 40px;
  height: 80px;
//border: 1px solid red; float: left; margin-top: 5px;
}

.under2 {
  width: 80%;
  height: 30px;
  border: 1px solid white;
  margin-left: 50px;
  margin-bottom: 10px;
}

.zi3 {
//border: 1px solid red; margin-top: 10px; width: 220px; margin-left: 10px;
  height: 20px;
  text-align: left;
}

.zi7{
  //border: 1px solid red;
  float: right;
  width: 50px;
  height: 20px;
  margin-right: 118px;
  margin-top: -39px;
}

.icon1 {
  float: right;
  margin-top: -20px;
}

.icon2 {
  float: right;
  margin-top: -20px;
  display: none;
}

.under3 {
  width: 80%;
  height: 50px;
  border-bottom: 1px solid #f5f5f5;
  margin-left: 50px;
  margin-top: 10px;
}

.zi4 {
  font-size: 15px;
  margin-left: 10px;
  text-align: left;
}

.under4 {
  width: 80%;
  height: 30px;
  margin-left: 50px;
  margin-top: 10px;
}

.zi5 {
  width: 70px;
  height: 20px;
//border: 1px solid red; float: left; margin-left: 12px;
}

.img3 {
  width: 20px;
  height: 20px;
  float: left;
  margin-left: 10px;
  margin-top: 5px;
}

.zi6 {
  width: 70px;
  height: 20px;
//border: 1px solid red; float: left;
}

</style>